<template>
  <div class="content_box">
    <div class="top_list">
      <van-radio-group :value="radio" @change="changePlay">
        <div class="list">
          <p class="down_time" v-if="downTime">
            <van-count-down @finish="timeFinish" use-slot format="mm:ss" :time="downTime" @change="onChange">
              <text class="item">0{{ timeData.minutes }} : </text>
              <text class="item">{{ timeData.seconds }}</text>
            </van-count-down>
          </p>
          <van-radio name="1" label-position="left">
            <div class="box">
              <div class="img">
                <van-image
                  width="100%"
                  height="100%"
                  fit="cover"
                  lazy-load
                  :src="roomMsg.roomImg && roomMsg.roomImg.length?roomMsg.roomImg[0]:''"
                />
              </div>
              <div class="msg">
                <p class="name">{{roomMsg.roomName}}</p>
                <div class="label_box">
                  <p v-for="(child,i) in roomMsg.labelVoList" :key="i">{{child.labelName}}</p>
                </div>
              </div>
            </div>
          </van-radio>
        </div>
      </van-radio-group>
    </div>

    <div class="up_time_box new_time_box">
      <p class="title">续费前时间</p>
      <div class="changeTime">
        <div class="left">
          <p class="text">开始时间</p>
          <p class="day">{{oldTimeMsg.startWeek}} {{oldTimeMsg.startTimeSlot}}</p>
          <p class="time">{{oldTimeMsg.startTime}}</p>
        </div>
        <div class="center">
          <p class="totel">共{{oldTimeMsg.timeLength}}小时</p>
        </div>
        <div class="left">
          <p class="text">结束时间</p>
          <p class="day">{{oldTimeMsg.endWeek}} {{oldTimeMsg.endTimeSlot}}</p>
          <p class="time">{{oldTimeMsg.endTime}}</p>
        </div>
      </div>
      <picker 
        @change="timeChange"
        :range="timeList"
        range-key="time"
      >
        <div class="time_pop">
          <p class="title1">续费时长</p>
          <p class="text">{{changeTime}}<van-icon name="arrow" /></p>
        </div>
      </picker>
    </div>

    <div class="up_time_box" v-if="isXf">
      <p class="title">续费后时间</p>
      <div class="changeTime">
        <div class="left">
          <p class="text">开始时间</p>
          <p class="time">{{newTimeMsg.startTime}}</p>
          <p class="day">{{newTimeMsg.startWeek}} {{newTimeMsg.startTimeSlot}}</p>
        </div>
        <div class="center">
          <p class="totel">共{{newTimeMsg.timeLength}}小时</p>
        </div>
        <div class="left">
          <p class="text">结束时间</p>
          <p class="time">{{newTimeMsg.endTime}}</p>
          <p class="day">{{newTimeMsg.endWeek}} {{newTimeMsg.endTimeSlot}}</p>
        </div>
      </div>
    </div>
    <div class="play_type" v-if="isXf">
      <p class="title">请选择支付方式</p>
      <div class="box">
        <van-radio-group :value="radio_type" @change="changePlay">

          
          <van-radio name="1" label-position="left">
            <div class="nr">
              <img mode="widthFix" src="/static/images/wx_play.png" alt="">
              <div>
                <p>微信支付</p>
              </div>
            </div>
          </van-radio>
          <van-radio name="2" label-position="left">
            <div class="nr b_margin">
              <img mode="widthFix" src="/static/images/ye_play.png" alt="">
              <div>
                <p>余额支付({{roomMsg.walletBalance}})</p>
              </div>
            </div>
          </van-radio>
        </van-radio-group>
        
        
      </div>
    </div>
    <div :style="{paddingBottom:isIphoneXnum+100+'px'}">
      <div class="action_box">
        <div class="tir_top">续费说明</div>
        <div class="tir_one">1、续费订单使用前可申请退订，超出时间将不可退订；</div>
        <div class="tir_one">2、棋牌室禁止从事黄赌毒行为；</div>
        <div class="tir_one">3、棋牌室配有自助售货机，若有需要可至自助售货机购买；</div>
        <div class="tir_one">4、本棋牌室全程自助，房间内配套均可免费使用，如有损坏，按市价赔偿；</div>
      </div>
    </div>

    <div class="button_box" :style="{paddingBottom:isIphoneXnum+'px'}">
      <div class="box">
        <div>
          <p class="text_t">待支付</p>
          <p class="price">￥<span>{{totlePrice}}</span></p>
        </div>
        <p class="anniu" v-if="!isXf">立即支付</p>
        <van-button 
          v-if="isXf && radio_type == '1'"
          @click="submit(0)"
          :disabled="loading"
          :loading="loading" 
          loading-text="支付中..."
          type="primary"
          color="#3d98f7"
          custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 288rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;"
        >微信支付</van-button>
        <van-button 
          v-if="isXf && radio_type == '2' && balancePay"
          @click="submit(1)"
          :disabled="loading"
          :loading="loading" 
          loading-text="支付中..."
          type="primary"
          color="#3d98f7"
          custom-style="font-family: PingFangSC-Regular, PingFang SC;border:none;width: 288rpx;height:80rpx;line-height: 80rpx;background: #00C200;border-radius: 40rpx;text-align: center;color: #fff;font-size: 32rpx;"
        >余额支付</van-button>
        <p v-if="isXf && radio_type == '2' && !balancePay" class="button" @click="toCz" >立即充值</p>
      </div>
    </div> 
    
  </div>
</template>

<script>
import { 
  reorderVerify,
  reorder,
  getMyOrderDetails,
  walletPay,
  getReorderDetails,
  reorderWalletPay
} from "@/api/index";
import { Debounce } from "@/utils"
export default {
  data() {
    return {
      timeList:[
        {time:'1个小时',label:1},
        {time:'2个小时',label:2},
        {time:'3个小时',label:3},
        {time:'4个小时',label:4},
      ],
      isIphoneXnum:0,
      radio:'1',
      msg:{},
      oldTimeMsg:{},
      newTimeMsg:{},
      changeTime:'请选择时长',
      isXf:false,
      totlePrice:'0.00',
      loading:false,
      roomMsg:{},
      balancePay:true,
      timeData:{},
      downTime:0,
      radio_type:'1',
    };
  },
  methods: {

    // 跳转充值
    toCz(){
      wx.navigateTo({
        url: `/pages/recharge/main?active=1`,
      });
    },

    //倒计时结束
    timeFinish(){
      wx.showModal({
        title: '提示',
        content: '付款超时，请返回重新续单',
        showCancel: false,
        confirmText:'我知道了',
        success: (res)=>{
          if (res.confirm) {//这里是点击了确定以后
            wx.navigateBack({
              delta: 1  // 返回上一级页面。
            })
          }
        }
      })
    },

    // 选择支付方式
    changePlay(e){
      console.log(e)
      this.radio_type = e.mp.detail
      if(this.radio_type == '2' && +this.roomMsg.walletBalance<+this.totlePrice){
        this.balancePay = false
      }
      if(this.radio_type == '2' && +this.roomMsg.walletBalance>+this.totlePrice){
        this.balancePay = true
      }
    },

    onChange(e) {
      this.timeData = e.mp.detail
      if(this.timeData.seconds < 10){
        this.timeData.seconds = `0${this.timeData.seconds}`
      }
    },

    // 获取订单详情
    getOrderMsg(){
      getReorderDetails({orderId:this.msg.orderId}).then(res=>{
        if(res.statusCode == '00000'){
          this.roomMsg = res.data
          if(+res.data.walletBalance>+this.totlePrice){
            this.balancePay = true
          }else{
            this.balancePay = false
          }
        }
      })
    },

    // 续单支付-钱包
    ye_submit:Debounce(function () {
      this.loading = true
      this.$showLoading('支付中...')
      walletPay({orderId:this.msg.orderId}).then(res=>{
        if(res.statusCode == '00000'){
          this.$toast('续单成功')
          setTimeout(() => {
            wx.reLaunch({
              url: `/pages/order_xq/main?orderId=${this.msg.orderId}&shareType=0`,
            });
          }, 1000);
        }else{
          wx.hideLoading()
          this.loading = false
          this.$toast(res.message)
        }
      })
    },300),

    // 续单支付-微信
    submit:Debounce(function (state) {
      const that = this
      this.loading = true
      let data = {
        startTime:`${this.newTimeMsg.startTime} ${this.newTimeMsg.startTimeSlot}:00`,
        orderId:this.msg.orderId,
        reorderHour:Number(this.newTimeMsg.timeLength),
        endTime:`${this.newTimeMsg.endTime} ${this.newTimeMsg.endTimeSlot}:00`,
      }
      let returnData = state?reorderWalletPay(data):reorder(data)
      returnData.then(res=>{
        if(res.statusCode == '00000'){
          this.downTime = res.data.timeOut * 1000
          if(state){
            this.$toast('续单成功')
            setTimeout(() => {
              wx.reLaunch({
                url: `/pages/order_xq/main?orderId=${this.msg.orderId}&shareType=0`,
              });
            }, 1000);
            return
          }
          wx.requestPayment({
            timeStamp:res.data.timeStamp,
            nonceStr:res.data.nonce_str,
            package:`prepay_id=${res.data.prepay_id}`,
            signType:"MD5",
            paySign:res.data.sign,
            success:function(succ){
              console.log(succ)
              if(succ.errMsg === "requestPayment:ok"){
                that.$toast('续单成功')
                setTimeout(() => {
                  wx.reLaunch({
                    url: `/pages/order_xq/main?orderId=${that.msg.orderId}&shareType=0`,
                  });
                }, 1000);
              }
            },
            fail:function(err){
              that.loading = false
              wx.hideLoading()
            }
          })
        }else{
          that.loading = false
          wx.hideLoading()
          that.$toast(res.message)
        }
      })
    },300),

    // 续费时长选择
    timeChange(e){
      console.log(e)
      let index = e.mp.detail.value
      let label = this.timeList[+index].label

      this.changeTime = this.timeList[+index].time
      let newTime = (new Date(this.msg.endTime).valueOf())+label*3600000
      this.newTimeMsg = this.getSplicTime(Date.parse(this.msg.endTime),newTime)
      console.log(this.newTimeMsg)

      let data = {
        orderId:this.msg.orderId,
        roomId:this.msg.roomId,
        startTime:`${this.newTimeMsg.startTime} ${this.newTimeMsg.startTimeSlot}:00`,
        endTime:`${this.newTimeMsg.endTime} ${this.newTimeMsg.endTimeSlot}:00`
      }
      reorderVerify(data).then(res=>{
        if(res.statusCode == '00000'){
          console.log(this.msg.price)
          this.totlePrice = ((+this.msg.price)*(+this.newTimeMsg.timeLength)).toFixed(2)
          this.isXf = true
        }else{
          this.$toast(res.message)
        }
      })
      // reorderVerify({orderId:this.msg.orderId,time:label}).then(res=>{
      //   if(res.statusCode == '00000'){
          
      //   }else{
      //     this.$toast(res.message)
      //   }
      // })
      
    },

    // 洗时间-续费前后
    getSplicTime(start,end){
      let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      let startDate = new Date(start);
      let endDate = new Date(end);
      return {
        startTime:`${startDate.getFullYear()}-${(startDate.getMonth() + 1).toString().length == 1
            ? "0" + (startDate.getMonth() + 1).toString()
            : startDate.getMonth() + 1}-${startDate.getDate().toString().length == 1
            ? "0" + startDate.getDate()
            : startDate.getDate()}`,
        endTime:`${endDate.getFullYear()}-${(endDate.getMonth() + 1).toString().length == 1
            ? "0" + (endDate.getMonth() + 1).toString()
            : endDate.getMonth() + 1}-${endDate.getDate().toString().length == 1
            ? "0" + endDate.getDate()
            : endDate.getDate()}`,
        startTimeSlot:`${startDate.getHours().toString().length == 1
            ? "0" + startDate.getHours().toString():startDate.getHours()}:${startDate.getMinutes().toString().length == 1
            ? "0" + startDate.getMinutes().toString():startDate.getMinutes()}`,

        endTimeSlot:`${endDate.getHours().toString().length == 1
            ? "0" + endDate.getHours().toString():endDate.getHours()}:${endDate.getMinutes().toString().length == 1
            ? "0" + endDate.getMinutes().toString():endDate.getMinutes()}`,
        startWeek:weeks[startDate.getDay()],
        endWeek:weeks[endDate.getDay()],
        timeLength:this.getHour(start,end)
      }
    },

    // 算选择多少小时
    getHour(s1, s2) {
      let time = s2 - s1
      let timeDate = new Date(time);
      var ms = timeDate.getTime();
      if (ms < 0) return 0;
      return (ms / 1000 / 60 / 60).toFixed(1);  //小时
    },
  },
  onShow(){
    this.active = 1
    this.getOrderMsg()
  },
  onLoad(options) {
    this.msg = JSON.parse(options.info)
    console.log(this.msg)
    this.oldTimeMsg = this.getSplicTime(Date.parse(this.msg.startTime),Date.parse(this.msg.endTime))
    console.log(this.oldTimeMsg)
    //判断手机机型，动态给底部添加样式
    wx.getSystemInfo({
      success: (res) => {
        console.log("手机信息res" + res.model);
        let modelmes = res.model;
        if (
          modelmes.search("iPhone 13") != -1 ||
          modelmes.search("iPhone 12") != -1 ||
          modelmes.search("iPhone 11") != -1 ||
          modelmes.search("iPhone X") != -1 ||
          modelmes.search("iPhone XR") != -1 ||
          modelmes.search("iPhone XS") != -1
        ) {
          this.isIphoneXnum = 25;
        } else {
          this.isIphoneXnum = 0;
        }
      },
    });
  },
  onUnload() {
    this.downTime=0
    this.loading = false
    this.isXf = false
    this.changeTime = '请选择时长'
    this.totlePrice = '0.00'
    this.radio_type = '1'
  },
};
</script>

<style lang="scss" scoped>
.content_box{
  min-height: 100vh;
  background: #F5F5F5;
  padding-top:20rpx;
  .top_list{
    width: 94%;
    margin:0 auto;
    margin-bottom:24rpx;
    .list{
      background: #fff;
      padding:24rpx;
      margin-bottom:24rpx;
      border-radius: 16rpx;
      position: relative;
      /deep/ .van-radio__icon--checked{
        background: #00C200;
        border-color:#00C200;
      }
      /deep/ .van-radio__label{
        width: 100%;
      }
    }
    .box{
      display: flex;
      align-items: center;
      .img{
        width: 140rpx;
        height: 160rpx;
      }
      .msg{
        margin-left: 24rpx;
        .name{
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #111111;
          margin-bottom:15rpx;
        }
        .label_box{
          margin-top:12rpx;
          p{
            display: inline-block;
            padding:0 12rpx;
            height: 40rpx;
            line-height: 40rpx;
            background: #FFFFFF;
            border: 2rpx solid #00C200;
            border-radius: 10rpx;
            margin-right:16rpx;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #00C200;
            &:last-child{
              margin-right:0;
            }
          }
        }
      }
    }
    .down_time{
      position: absolute;
      top:0;
      right:0;
      background: #FAF1EC;
      padding:4rpx 0rpx;
      width: 120rpx;
      text-align: center;
      border-bottom-left-radius: 20rpx;
      .item{
        color:#FF4357;
        font-weight: 500;
        font-size:30rpx;
      }
    }
  }
  .up_time_box{
    width: 94%;
    margin:0 auto;
    margin-bottom:24rpx;
    background: #fff;
    border-radius: 16rpx;
    .title{
      padding:0 24rpx;
      height: 104rpx;
      line-height: 104rpx;
      font-size:32rpx;
      color:#111;
      font-weight: 500;
      border-top-right-radius: 16rpx;
      border-top-left-radius: 16rpx;
      background: linear-gradient(158deg, #D6FFD6 0%, #FFFFFF 28%, #D8FFD8 100%, #88F388 100%);
    }
    .changeTime{
      background: #fff;
      border-radius: 4rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding:24rpx;
      border-bottom:1px solid #F0F0F0;
      .text{
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
      }
      .time{
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #111111;
      }
      .day{
        font-size: 30rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #00C200;
        margin:16rpx 0;
      }
      .center{
        display: flex;
        align-items: center;
        .totel{
          width: 220rpx;
          height: 64rpx;
          line-height: 64rpx;
          background: #00C200 !important;
          border-radius: 50rpx;
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          text-align: center;
        }
      }
    }
    .time_pop{
      padding:0 24rpx;
      height: 104rpx;
      line-height: 104rpx;
      border-bottom:1px solid #F0F0F0;
      font-size:30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title1{
        color:#111;
        font-weight: 500;
      }
      .text{
        color:#666;
        font-weight: 500;
      }
    }
  }
  .new_time_box{
    .changeTime{
    }
    .totel{
      background: linear-gradient(to right, #7D8088 50%,#8F919B 100%) !important;
    }
  }
  .action_box{
    margin-top: 20rpx;
    padding-bottom: 10rpx;
    border-radius: 4rpx;
    background: #fff;
    width: 94%;
    margin:20rpx auto 0 auto;
    border-radius: 16rpx;
    .tir_top{
      // height: 25rpx;
      padding: 0 30rpx;
      height: 90rpx;
      line-height:90rpx ;
      border-bottom:1px solid #f4f4f4;
      margin-bottom: 10rpx;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
    }
    .tir_one{
       padding: 0 30rpx;
      line-height: 50rpx;
      display: flex;
      align-items: center;
      font-size:26rpx !important;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999999;
    }
  }
  .button_box{
    width: 100%;
    height: 120rpx;
    position: fixed;
    bottom:0;
    left:0;
    background: #fff;
    // ededed
    // box-shadow: 0 10rpx 15rpx 10rpx rgb(219, 219, 219);
    border-top:1px solid #D9D9D9;
    .box{
      width: 92%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin:0 auto;
      .price{
        font-size:32rpx;
        text-align: right;
        margin-right: 20px;
        span{
          font-size: 46rpx;
          font-weight: 500;
        }
      }
      .anniu{
        width: 288rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #b4e8b4;
        box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.02);
        border-radius: 40rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
      }
      .meituan{
        margin-right:30rpx;
        background: linear-gradient(to right, #FFDD48 50%, #FCCA4E 100%);
        color:#333;
      }
    }
     .text_t{
      color:#FF4D50;
      font-size:28rpx;
      margin-bottom:6rpx;
    }
  }
}
.play_type{
  width: 86%;
  margin:0 auto;
  background: #fff;
  padding:30rpx;
  border-radius: 16rpx;
    .title{
      font-size: 30rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #111111;
    }
    img{
      width: 40rpx;
      height: 40rpx;
      margin-right:30rpx;
    }
    .box{
      padding:10rpx 0 0 0;
      width:90%;
      margin:0 auto;
      /deep/ .van-radio{
        justify-content: space-between;
        height: 100rpx;
      }
      /deep/ .van-radio__icon--checked{
        background: #00C200;
        border-color:#00C200;
      }
      /deep/ .van-radio__label--left{
        flex: 1;
      }
      .nr{
        display: flex;
        align-items: center;
        width: 100%;
        div{
          justify-content: end;
          padding-left:0;
          font-weight: 500;
          flex: 1;
          p{
            height: auto;
            padding-left:0;
            border-bottom:none;
            display: flex;
            align-items: baseline;
            color:#323233 !important;
            font-size:28rpx;
          }
          img{
            width: 40rpx;
          }
        }
      }
    }
  }
  .button{
    width: 288rpx;
    height: 80rpx;
    line-height: 80rpx;
    background: #00C200;
    box-shadow: 0rpx -2rpx 2rpx 0rpx rgba(0,0,0,0.02);
    border-radius: 40rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
  }
</style>